<template>
  <div class="bg-[#F7F7F7] p-16">
    <div
      class="bg-white rounded-20 w-full shadow-[0px_0px_4px_3px_rgba(213,213,213,0.25)]"
    >
      <van-tabs
        v-model:active="active"
        swipeable
        :border="true"
        class="rounded-20"
        :style="{
          '--van-tab-text-color': '#979797',
          '--van-tab-active-text-color': '#1871F5',
          '--van-tabs-bottom-bar-color': '#4590FF',
          '--van-tab-font-size': pxChangeRem(14),
          '--van-tab-line-height': pxChangeRem(16),
          '--van-tabs-bottom-bar-width': pxChangeRem(70)
        }"
      >
        <van-tab :title="'Hot News'">
          <Waterfall :list="newsList" @clickItem="jumpToDetail"> </Waterfall>
          <LoadMore
            v-if="videoList.length"
            :status="newsLoadMoreStatus"
            @loadmore="loadNews"
          />
        </van-tab>
        <van-tab :title="'Hot Videos'">
          <Waterfall :list="videoList" @clickItem="jumpToVideo"> </Waterfall>
          <LoadMore
            v-if="videoList.length"
            :status="videoLoadMoreStatus"
            @loadmore="loadVideo"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import useVideo from "./hook/useVideo";
import useNews from "./hook/useNews";
import { pxChangeRem } from "@/utils";
const props = withDefaults(
  defineProps<{
    active?: number;
  }>(),
  {
    active: () => 0
  }
);
const router = useRouter();
const route = useRoute();
const { videoList, loadVideo, videoLoadMoreStatus } = useVideo();
const { newsList, loadNews, newsLoadMoreStatus } = useNews();
const active = ref(props.active);
const jumpToVideo = (item: any) => {
  router.push({
    path: "/video",
    query: { id: item.youtubeId, ...route.query }
  });
};

const jumpToDetail = (item: any) => {
  router.push({
    path: `/news/detail/${item.id}`,
    query: { ...route.query }
  });
};
</script>
<style scoped lang="less">
:deep(.van-tabs__wrap) {
  @apply rounded-20;
}
</style>
